<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帖子列表页</title>
    <style type="text/css">
        #container {
            width: 1000px;
            border: solid 2px green;
            margin: 50px auto;
            padding: 30px;
        }

        #header {
            width: 100%;
            height: 50px;
            font-size: 22px;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
            border: solid 1px green;
            background-color: green;
            color: white;
            position: relative;
        }

        #online_user {
            position: absolute;
            left: 30px;
            top: 0;
        }

        #header_btn {
            position: absolute;
            right: 30px;
            top: 0;
        }

        #content {
            width: 100%;
            margin: 0 auto;
            margin-top: 30px;
            border: solid 1px green;
            position: relative;
        }

        #content table {
            width: 100%;
        }

        #paging,#search {
            width: 100%;
            text-align: center;
            margin: 30px 0;
        }

    </style>
</head>
<body>
<div id="container">
    <div id="header">

        <span id="online_user" th:if="${ session.onlineUser != null }">
            当前用户：<span th:text="${ session.onlineUser.nickname }"></span>
            <img alt="头像错误" th:src="@{'/' + ${session.onlineUser.photo}}" style="height:40px;vertical-align: middle;">
        </span>
        <span id="online_user" th:if="${ session.onlineUser == null }">登录之后才可以发帖和评论！</span>

        <span id="header_btn">
            <a th:href="@{/user/login}" th:if="${ session.onlineUser == null }">立即登录</a>
            <a th:href="@{/user/logout}" th:if="${ session.onlineUser != null }">退出账号</a>
            <a th:href="@{ /post/add }" th:if="${ session.onlineUser != null && session.onlineUser.active == 1 }">我要发帖</a>
            <a href="#" id="active" th:if="${ session.onlineUser != null && session.onlineUser.active != 1 }">激活邮箱</a>
        </span>
    </div>

    <div id="content">

        <div id="search">
            <form th:action="@{ /post/page }" method="post">
                标题：
                <input type="text" name="title" th:value='${ post?.title }'>
                摘要：
                <input type="text" name="summary" th:value='${ post?.summary }'>
                内容：
                <input type="text" name="content" th:value='${ post?.content }'>
                <input type="button" id="searchBtn" value="查询">

                <input type="hidden" name="pageNum" th:value="${ page.getNumber() }">
                <input type="hidden" name="pageSize" th:value="${ page.getSize() }">
            </form>
        </div>


        <table border="1" cellpadding="5px" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>封面</th>
                <th>标题</th>
                <th>作者</th>
                <th>类别</th>
                <th>摘要</th>
                <th>时间</th>
                <th>评论数</th>
            </tr>

            <tr th:each="post : ${ page }" align="center">
                <td th:text="${ postStat.count }"></td>
                <td>
                    <img th:if="${ !#strings.isEmpty(post.image) }" alt="封面图" th:src="@{'/' + ${post.image}}" style="width:50px;">
                    <span th:if="${ #strings.isEmpty(post.image) }">暂无图片</span>
                </td>
                <td><a th:href="@{ /post/detail(id=${ post.id }) }" th:text="${ post.title }"></a></td>
                <td th:text="${ post.user.nickname }"></td>
                <td th:text="${ post.type.desc }"></td>
                <td th:text="${ post.summary }"></td>
                <td th:text="${ #dates.format(post.createTime, 'yyyy年MM月dd日 HH点mm分ss秒') }"></td>
                <td th:text="${ post.comments.size() }"></td>
            </tr>

        </table>


        <div id="paging">
            <!-- 首页和上一页 -->
            <span th:if="${ page.getNumber() gt 0 }">
                <a href="#" data-currentpage="0">首页</a>
                <a href="#" th:data-currentpage="${ page.getNumber() - 1 }">上一页</a>
            </span>

            <!-- 总页数小于等于10 -->
            <span th:if="${ page.getTotalPages() le 10 }" th:each="i : ${ #numbers.sequence(0, page.getTotalPages() - 1) }">
                <a href="#" th:text="${ i + 1 }" th:data-currentpage="${ i }" th:if="${ page.getNumber() ne i }"></a>
                <span th:text="${ i + 1 }" th:if="${ page.getNumber() eq i }"></span>
            </span>

            <!-- 总页数大于10 -->
            <span th:if="${ page.getTotalPages() gt 10 }">
                <!-- 当前页小于5 -->
                <span th:if="${ page.getNumber() lt 5 }" th:each="i : ${ #numbers.sequence(0, 9) }">
                    <a href="#" th:text="${ i + 1 }" th:data-currentpage="${ i }" th:if="${ page.getNumber() ne i }"></a>
                    <span th:text="${ i + 1 }" th:if="${ page.getNumber() eq i }"></span>
                </span>
                <!-- 当前页大于等于5，加4页后小于总页数 -->
                <span th:if="${ page.getNumber() ge 5 && page.getNumber() + 4 lt page.getTotalPages() }" th:each="i : ${ #numbers.sequence(page.getNumber() - 5, page.getNumber() + 4) }">
                    <a href="#" th:text="${ i + 1 }" th:data-currentpage="${ i }" th:if="${ page.getNumber() ne i }"></a>
                    <span th:text="${ i + 1 }" th:if="${ page.getNumber() eq i }"></span>
                </span>
                <!-- 当前页大于等于5，加4页后大于等于总页数 -->
                <span th:if="${ page.getNumber() ge 5 && page.getNumber() + 4 ge page.getTotalPages() }" th:each="i : ${ #numbers.sequence(page.getTotalPages() - 10, page.getTotalPages() - 1) }">
                    <a href="#" th:text="${ i + 1 }" th:data-currentpage="${ i }" th:if="${ page.getNumber() ne i }"></a>
                    <span th:text="${ i + 1 }" th:if="${ page.getNumber() eq i }"></span>
                </span>
            </span>

            <!-- 尾页和下一页 -->
            <span th:if="${ page.getNumber() lt (page.getTotalPages() - 1) }">
                <a href="#" th:data-currentpage="${ page.getNumber() + 1 }">下一页</a>
                <a href="#" th:data-currentpage="${ page.getTotalPages() - 1 }">尾页</a>
            </span>

            <span>
                共<span th:text="${ page.getTotalPages() }"></span>页
            </span>

            <div style="display:inline-block;">
                每页
                <select name="pageSize">
                    <option value="5" th:selected="${ page.getSize() eq 5}">5</option>
                    <option value="10" th:selected="${ page.getSize() eq 10}">10</option>
                    <option value="20" th:selected="${ page.getSize() eq 20}">20</option>
                </select>
                条

                转到
                <input type="number" name="currentPage" th:value="${ page.getNumber() + 1 }" style="width:40px">
                页
                <button id="page_goto">跳转</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script type="text/javascript">
    $(function() {

        $('#paging a').click(function(e) {

            // 阻止a标签跳转
            e.preventDefault();
            // 从a标签上获取currentPage
            let currentPage = $(this).data('currentpage');
            // 从分页上获取pageSize
            let pageSize = $('#paging [name="pageSize"]').val();

            // 把数据给到搜索表单的隐藏域
            $('#search form [name="pageNum"]').val(currentPage);
            $('#search form [name="pageSize"]').val(pageSize);

            // 提交搜索表单
            $('#search form').submit();
        })

        $('#searchBtn').click(function() {
            $('#search form [name="pageNum"]').val(0);
            $('#search form').submit();
        })

        $('#paging [name="pageSize"]').change(function() {
            $('#search form [name="pageSize"]').val($('#paging [name="pageSize"]').val());
            $('#search form [name="pageNum"]').val(0);
            $('#search form').submit();
        })

        $('#page_goto').click(function() {
            $('#search form [name="pageNum"]').val($('#paging [name="currentPage"]').val() - 1);
            $('#search form').submit();
        })

        $('#active').click(function(e) {
            // 阻止a标签跳转
            e.preventDefault();
            $.ajax({
                url: '/email/active',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    alert(result.message);
                }
            })
        });

    })

</script>
</body>
</html>